<template>
<div class="editordlg">
    <el-dialog
        :title="title"
        :visible.sync="isShowDlg"
        v-on:close="closeHandler()"
        width="40%"
        center>
        <span>
            <el-row>
                <el-col :span="3">
                    <div>{{oldtitle}}:</div>
                </el-col>
                <el-col :span="21">
                    <el-input
                        :placeholder="oldplaceholder"
                        v-model="oldname"
                        :disabled="true">
                    </el-input>
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div>{{newtitle}}:</div>
                </el-col>
                <el-col :span="21">
                    <el-input
                        :placeholder="newplaceholder"
                        v-model="newname"
                        clearable>
                    </el-input>
                 </el-col>
            </el-row>
        </span>
         <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onClickHandler()">提交</el-button>
            <el-button @click="closeHandler()" >取消</el-button>
        </span>
    </el-dialog>
</div>
</template>
<script>
export default {
    name: "editordlg",
    props: ["title", "oldtitle", "newtitle", "oldname", "oldplaceholder", "newplaceholder"],
    data() {
        return {
            isShowDlg: true,
            newname: ""
        };
    },
    methods: {
        onClickHandler() {
            this.$emit("on-click-category", this.newname);
        },
        closeHandler() {
            this.$emit("on-close-handler");
            this.isShowDlg = false;
        }
    }
};
</script>
<style scoped>
</style>